<template>
	<view class="page category">
		<view class="list">
			<view class="item" v-for="item in list" :key="item._id">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</view>			
		</view>
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script setup>
	import {ref,reactive} from "vue";
	import {GetCategoryDetail} from "../../api/index.js"
	import {onLoad} from "@dcloudio/uni-app";
	
	const list = ref([]);
	
	const params = {
		pageNum:1,
		pageSize:12
	};
	
	onLoad((e)=>{
		const {id=null,name=null} =e;
		uni.setNavigationBarTitle({
			title:name
		})
		getCategoryDetail(id,name);
	})
	// 获取数据
	const getCategoryDetail = async (id,name)=>{
		let res =null;
		if(id){
			params.classid=id;
			res = await GetCategoryDetail(params);
			list.value=res.data;
		}
	}
</script>

<style lang="scss" scoped>
	.list{
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap:5rpx;
		padding:5rpx;
		.item{
			height: 440rpx;
			image{
				width: 100%;
				height: 100%;
				display: block;
			}
		}
	}
</style>
